<template>
    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="relevanceRoleVisible = true"
            >关联用户</el-button>
        </div>
    </div>
    <el-table
        :data="dataList"
        style="width: 100%"
        border
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="username"
            label="账号"
        />
        <el-table-column
            prop="realName"
            label="姓名"
        />
        <el-table-column
            prop="phone"
            label="手机号"
        />
        <el-table-column
            prop="roleNames"
            label="权责"
        >
            <template #default="scope">
                <el-tag
                    v-for="item in scope.row.roleNames"
                    :key="item"
                    type="primary"
                    style="margin: 2px"
                >
                    {{ item }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="130"
        >
            <template #default="scope">
                <el-button
                    link
                    type="danger"
                    size="small"
                    @click="handleDeleteRelevance(scope.row)"
                >取消关联</el-button>
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleRemove(scope.row)"
                >移动</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
    <el-dialog
        v-model="relevanceRoleVisible"
        title="关联人员"
        width="400"
    >
        <label for="">人员：</label>
        <el-select
            v-model="userItem"
            placeholder="请选择"
            clearable
            filterable
            style="width: 160px"
        >
            <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
            />
        </el-select>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="relevanceRoleVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="relevanceRoleConfrim()"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog
        v-model="moveRoleVisible"
        title="移动人员"
        width="400"
    >
        <div style="margin-bottom: 20px">
            <label for="">原组织：</label>
            {{ ruleForm.depName }}
        </div>
        <div>
            <label for="">新组织：</label>
            <el-tree-select
                v-model="newDepId"
                :data="dataSource"
                filterable
                :render-after-expand="false"
                style="width: 240px"
            />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="moveRoleVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="moveRoleConfrim()"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import userHttp from "@/https/user.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
const emits = defineEmits(["updateDep"]);

const dataList = ref([]);
const userItem = ref("");
const userList = ref([]);
const dataSource = ref([]);
const defaultProps = {
    children: "depVOS",
    label: "depName",
};
const relevanceRoleVisible = ref(false);
const moveRoleVisible = ref(false);
const roleItem = ref("");
const props = defineProps({
    ruleFormProps: {
        type: Object,
        default: {},
    },
    type: {
        type: String,
        default: "",
    },
});

const ruleForm = reactive({
    depCode: "",
    depName: "",
    parentCode: "",
    parentName: "",
    sorts: 0,
    comment: "",
});
ruleForm.value = props.ruleFormProps.value;
watch(
    () => props.ruleFormProps,
    (val) => {
        ruleForm.id = val.id;
        ruleForm.depCode = val.depCode;
        ruleForm.depName = val.depName;
        ruleForm.parentCode = val.parentCode;
        ruleForm.parentName = val.parentName;
        ruleForm.sorts = val.sorts;
        ruleForm.comment = val.comment;
        console.log(ruleForm, "valvalval");
        search();
        depGetDeps();
        userQueryUserList();
    },
    { deep: true }
);
const searchForm = {
    pageNo: 1,
    pageSize: 10,
};
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
const search = async () => {
    let params = {
        depId: ruleForm.id,
        id: ruleForm.id,
        ...searchForm,
    };
    const res = await userHttp.depQueryDepUsers(params);
    if (res.data.code === 200) {
        dataList.value = res.data.data.records;
        total.value = res.data.data.total;
    }
};

const userQueryUserList = async () => {
    let params = {
        depId: ruleForm.id,
        id: ruleForm.id,
        isDelete: 0,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await userHttp.depQueryNoRoteUserList(params);
    if (res.data.code == 200) {
        userList.value = res.data.data.records;
    }
};
const handleDeleteRelevance = async (row) => {
    ElMessageBox.confirm(`确认取消关联【${row.username}】吗？`, `删除`, {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        let params = {
            depId: ruleForm.id,
            id: ruleForm.id,
            userId: row.id,
            isDelete: 1,
        };
        userHttp.depUpdateDepToUser(params).then((res) => {
            if (res.data.code === 200) {
                relevanceRoleVisible.value = false;
                depGetDeps();
                userQueryUserList();
                search();
            }
        });
    });
};
const relevanceRoleConfrim = async () => {
    if (userItem.value != "") {
        let params = {
            depId: ruleForm.id,
            id: ruleForm.id,
            userId: userItem.value,
            isDelete: 0,
        };
        const res = await userHttp.depUpdateDepToUser(params);
        if (res.data.code === 200) {
            relevanceRoleVisible.value = false;
            search();
        }
    } else {
        ElMessage({
            type: "warning",
            message: "请选择人员！",
        });
    }
};

const depGetDeps = async () => {
    const res = await userHttp.depGetDeps();
    if (res.data.code === 200) {
        dataSource.value[0] = res.data.data;
        listdeep(dataSource.value);
        console.log(dataSource.value, "12e31231---------");
    }
};
const listdeep = (list) => {
    list.forEach((item) => {
        item.label = item.depName;
        item.value = item.id;
        item.children = item.depVOS;
        if (item.depVOS && item.depVOS.length > 0) {
            listdeep(item.depVOS);
        }
    });
};
const newDepId = ref();
const currentMoveRole = ref();
const handleRemove = async (row) => {
    moveRoleVisible.value = true;
    currentMoveRole.value = row;
};
const moveRoleConfrim = async () => {
    moveRoleVisible.value = true;
    let params = {
        newDepId: newDepId.value,
        oldDepId: ruleForm.id,
        userId: currentMoveRole.value.id,
    };
    const res = await userHttp.depMoveDepToUser(params);
    if (res.data.code == 200) {
        moveRoleVisible.value = false;
        ElMessage({
            type: "success",
            message: "移动成功",
        });
        search();
    }
};
onMounted(() => {
    // queryRoleList();
});
</script>
<style lang="less" scoped>
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
</style>